<template>
  <view>
    <view class="orderPart">
      <view
        class="orderList bg-white"
        v-for="(item, index) in offlineList"
        :key="index"
      >
        <view class="headPart flex justify-between">
          <view class="name">{{ item.merName }}</view>
          <view class="orderStatus" :class="'col' + status[item.paidStatus]">{{
            item.paidStatus
          }}</view>
        </view>
        <view class="content flex justify-between">
          <view class="flex">
            <image
              :src="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/offlineOrder.png'"
              class="orderImg"
              mode="scaleToFill"
            />
            <view class="leftPart flex flex-column justify-center">
              <view class="tips">{{ "线下支付订单" }}</view>
              <view class="voucher dinAlternate">
                <text class="mr6">抵用券抵扣</text>
                {{ item.deductionPrice }}
                <text>元</text></view
              >
              <view class="orderPrice">
                <text class="mr6">订单金额</text>
                {{ item.totalPrice }}
                <text>元</text>
              </view>
            </view>
          </view>
          <view class="rightPart flex flex-column align-end">
            <view class="actualPart flex align-center">
              <view class="actual mr6">实付</view>
              <view class="pay">¥{{ item.payPrice }}</view>
            </view>
            <view class="pointsPart">
              <text class="mr6">获得积分</text>
              {{ item.userPoints }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <emptyPage
      :mTop="'35%'"
      v-if="offlineList.length <= 0"
      title="暂无记录"
      :locate="true"
      :imgSrc="'https://app-cangshu.oss-rg-china-mainland.aliyuncs.com/asssets/img/piteras.png'"
    ></emptyPage>
  </view>
</template>
<script>
import { getFindOfflinePageBySelf } from "@/api/user.js";
import emptyPage from "@/components/emptyPage.vue";
export default {
  components: {
    emptyPage,
  },
  data() {
    return {
      status: {
        支付中: 0,
        支付成功: 1,
        未支付: 2,
      },
      offlineList: [],
      pageNumber: 1,
      hasMore: true, // 是否还有更多数据
      loadTitle: "没有更多数据了",
      isPageActive: true, // 标记页面是否激活
    };
  },
  mounted() {
    this.getListData();
  },
  onHide() {
    this.isPageActive = false; // 页面卸载时标记为未激活
  },
  onReachBottom() {
    // 触底加载更多
  },
  methods: {
    // 下拉刷新
    refresh() {
      console.log("898888888888888888", this.hasMore, this.isPageActive);
      if (!this.hasMore && this.isPageActive) return;
      this.getListData(true);
    },
    // 获取线下列表数据
    getListData() {
      uni.showToast({
        title: "加载中...", // 提示内容
        icon: "loading", // 图标类型，可选值：'success'、'loading'、'none'
        duration: 300, // 提示持续时间，单位毫秒
        mask: true, // 是否显示透明蒙层
      });
      let data = {
        pageNumber: this.pageNumber,
        pagesize: 10,
      };
      getFindOfflinePageBySelf(data).then((res) => {
        this.pageNumber++;
        let list = res.data.records ? res.data.records : [];
        list.forEach((item) => {
          item.payPrice = item.totalPrice - item.deductionPrice;
        });
        let status = list.length === 0 ? false : true;
        this.offlineList = this.offlineList.concat(list); // 滚动添加之前的数据
        if (status) this.hasMore = true;
        else this.hasMore = false;
        this.isPageActive = true;
        // 模拟加载完成
        setTimeout(() => {
          uni.hideToast(); // 隐藏 Toast
        }, 300);
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.orderPart {
  padding: 10rpx 21rpx 20rpx 21rpx;
  .orderList {
    margin-top: 20rpx;
    border-radius: 19rpx;
    padding: 26rpx 11rpx 37rpx 11rpx;
    .headPart {
      padding: 0 12rpx 23rpx 17rpx;
      border-bottom: 2rpx solid #f5f5f5;
      .name {
        font-weight: 400;
        font-size: 28rpx;
        color: #272727;
      }
      .orderStatus {
        font-weight: 400;
        font-size: 28rpx;
        // color: #eb3f3a;
      }
    }
    .content {
      padding: 31rpx 19rpx 0rpx 28rpx;
      .orderImg {
        width: 100rpx;
        height: 105rpx;
        border-radius: 17rpx;
      }
      .leftPart {
        margin-left: 24rpx;
        .tips {
          font-size: 24rpx;
          color: #272727;
        }
        .voucher {
          font-size: 16rpx;
          margin-top: 8rpx;
          color: #eb3f3a;
        }
        .orderPrice {
          font-weight: 400;
          font-size: 18rpx;
          margin-top: 10rpx;
        }
      }
    }
    .rightPart {
      .actual {
        font-weight: 400;
        font-size: 17rpx;
        color: #272727;
      }
      .pay {
        font-size: 28rpx;
        color: #272727;
      }
      .pointsPart {
        margin-top: 10rpx;
        font-weight: 400;
        font-size: 18rpx;
        color: #b2aeae;
      }
    }
  }
}
.mr6 {
  margin-right: 6rpx;
}
.col0 {
  color: #eb3f3a !important;
}
.col1 {
  color: #11cc7b !important;
}
.col2 {
  color: #9a9999;
}
</style>
